<template>
	<div id="page">
		<nav-bar></nav-bar>
		<div id="page-main" ref="MainScroll" @touchstart="S_start" @touchmove="S_move" @touchend="S_end">
			<div :class="['page-main_track', Send ? 'tran' : '' ]" :style="{'top': - S_top + 'px' }" >
				<div class="page" :style="{'min-height' : page*1.1 +'px' }" style="background: #20283d;" ref="page1">
				</div>

				<div class="page" :style="{'min-height' : page*1.5 +'px' }" style="background: #fff;" ref="page2">
					1
				</div>

				<div class="page" :style="{'min-height' : page +'px' }" style="background: #20283d;" ref="page3">

				</div>

				<div class="page" :style="{'min-height' : page +'px' }" style="background: #fff;" ref="page4">
					
				</div>

				<div class="page" :style="{'min-height' : page +'px' }" style="background: #20283d;" ref="page5">
					
				</div>

				<div class="page" style="background: #FFF;" ref="page6">
					<div class="footer">
						<img class="f-bg" src="../assets/indx/footer-bg.png">
						<div class="f-box">
							<h3 class="h3">HashKey Hub</h3>
							<p class="p">Digital one-stop management platform</p>
							<p class="p">
								Hashkey group - its full name is Haskey digital asset group limited.
								It is a financial technology company focusing on blockchain and digital assets
							</p>
						</div>
						<div class="hui">CONTACT US</div>
						<span class="hui">contact@hashkey.com</span>
						<div class="line"></div>
						<div class="btn">BACK</div>

						<div class="weib">cop@2022......</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import navBar from "../components/navBar.vue"
	import {
		mapState
	} from "vuex";

	export default {
		name: "index2",
		components: {
			navBar
		},
		data() {
			return {
				scrollOn: false,
				pageTop: [],
				S_top: 0,
				S_qi: 0,
				S_start_y: 0,
				Send:false,

				videoUrl: 'https://hk-y0059.oss-cn-hongkong.aliyuncs.com/earth.webm',
				swi_video: true,
				bannerTab: 0,
				tabKa: 1,
				invite_code: '',
				
				page:'1000'
			}
		},
		computed: {

		},
		mounted() {
			this.page = this.$refs.MainScroll.offsetHeight;
		},

		methods: {
			S_start(e) { //触摸开始
				this.S_start_y = e.changedTouches[0].pageY,
				this.S_qi = this.S_top;
				this.Send = false;
				
				
				var page1 = this.$refs.page1.offsetTop;
				var page2 = this.$refs.page2.offsetTop;
				var page3 = this.$refs.page3.offsetTop;
				var page4 = this.$refs.page4.offsetTop;
				var page5 = this.$refs.page5.offsetTop;
				var page6 = this.$refs.page6.offsetTop;
				this.pageTop = [page1 ,page2 ,page3 ,page4 , page5 ,page6];
				
				// this.S_top = this.$refs.MainScroll.scrollTop;
				
			},
			S_move(e) { //滑动
				var S_end_y = e.changedTouches[0].pageY;
				var top =this.S_start_y - S_end_y;
				this.S_top = this.S_qi + top

			},

			S_end() { //离开屏幕
				this.Send = true;
				if(this.S_top < 0){
					this.S_top = 0;
				}else if(this.S_top > this.S_qi) { //下
					this.S_xia()
				} else { //上
					this.S_shang()
				}
			},
			S_xia() { //向下
				var S_top = this.S_top; 
				var main_h = this.$refs.MainScroll.offsetHeight //屏幕高度
				var pageTop = this.pageTop; //所有页面位置
				
				pageTop.forEach((elem, index) => {
					// console.log(top , S_top-elem , S_top-main_h)
					if (S_top+ main_h > elem  && S_top+ main_h < elem + 50) {
						console.log( "hui第"+ index +"页")
						this.S_top = elem - main_h
					} else if (S_top+ main_h > elem + 50 && S_top < elem) {
						console.log( "page第"+index+"页")
						this.S_top = elem
					}
				})
			},
			S_shang() { //向上
				var S_top = this.S_top;
				var main_h = this.$refs.MainScroll.offsetHeight //屏幕高度
				var pageTop = this.pageTop; //所有页面位置
				
				console.log(S_top , main_h , S_top-main_h)
				console.log(pageTop)
				
				pageTop.forEach((elem, index) => {
					if (elem > S_top && elem-50 < S_top) {
						console.log( "hui第"+index+"页")
						this.S_top = elem
					} else if (elem - 50 < S_top && S_top > elem - main_h ) {
						console.log( "page第"+index+"页")
						this.S_top = elem
					}
				})
			},
			M_Top(top) { //跳
				setTimeout(() => {
					this.scrollOn = true;
					this.$refs.MainScroll.scrollTop = top;
				}, 300)
			},

			navTo: function(e) {
				this.$router.push({
					name: e
				})
			},
			swiOn: function(e) {
				var videoUrl = [
					'https://hk-y0059.oss-cn-hongkong.aliyuncs.com/earth.webm',
					'https://hk-y0059.oss-cn-hongkong.aliyuncs.com/machine.webm',
					'https://hk-y0059.oss-cn-hongkong.aliyuncs.com/woman.webm'
				];
				this.swi_video = false;
				setTimeout(() => {
					this.videoUrl = videoUrl[e]
					this.swi_video = true;
				}, 500)

				this.bannerTab = e;
				var ka = this.tabKa + 1;
				if (ka > 3) {
					ka = ka - 3
				}
				this.tabKa = ka
			}


		}
	}
</script>

<style lang="scss" scoped>
	#page-main {
		position: absolute;
		z-index: 10;
		top: 120px;
		left: 0px;
		height: calc(100% - 120px);
		width: 100%;
		background: #FFF;
		overflow: hidden;

		&.on {
			// opacity: 0;
			overflow: scroll;
		}
		
		.page-main_track{
			position:relative;
			
			&.tran{
				-webkit-transition: all 0.5s;
				-moz-transition: all 0.5s;
				-o-transition: all 0.5s;
				transition: all 0.5s;
			}
		}
	}

	.page {
		background: #242944;
		height: 100%;
		color: #333;
		position: relative;
		z-index: 1;
		overflow: hidden;
		background: -moz-linear-gradient(to top, #f8846d 0%, #5ef2ff 60%);

		display: flex;
		flex-direction: column;
	}

	.page-bg {
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 100%;
	}

	.tran {
		-webkit-transition: all 1s;
		-moz-transition: all 1s;
		-o-transition: all 1s;
		transition: all 1s;
	}

	.banner {
		position: relative;
		width: 100%;
		height: 100%;

		.item {
			overflow: hidden;
		}

		.banner-info {
			height: 45%;
			border-bottom: 1px solid #eee;
			position: relative;

			.t-1 {
				position: absolute;
				bottom: 160px;
				width: 100%;
				line-height: 150px;
				font-size: 80px;
				font-weight: 300;
				text-align: center;
				color: transparent;
			}

			.t-2 {
				position: absolute;
				line-height: 80px;
				padding-top: 40px;
				top: 120%;
				color: transparent;
				text-align: center;
				width: 100%;
				font-size: 60px;
			}

			.xian {
				height: 10px;
				background: #0fc1b7;
				width: 150px;
				position: absolute;
				bottom: -5px;
				left: 50%;
				margin-left: -75px;
			}

			.yuan {
				position: absolute;
				top: 100%;
				left: 50%;
				margin-top: 0px;
				margin-left: 0px;
				z-index: -1;
				opacity: .3;
				height: 0px;
				width: 0px;
				background: #0fc1b7;
				border-radius: 50%;

				-webkit-transition-delay: 1s;
				-moz-transition-delay: 1s;
				-o-transition-delay: 1s;
				transition-delay: 1s;
			}

			.notes {
				text-align: center;
				font-size: 28px;
				width: 70%;
				margin: 0 auto;
				position: absolute;
				left: 40%;
				top: 140%;
				color: transparent;
				-webkit-transition-delay: 1s;
				-moz-transition-delay: 1s;
				-o-transition-delay: 1s;
				transition-delay: 1s;

			}
		}

		.on {
			z-index: 9;

			.t-1 {
				bottom: 0px;
				color: #fff;
			}

			.t-2 {
				top: 100%;
				color: #fff;
			}

			.yuan {
				margin-top: -200px;
				margin-left: -200px;
				height: 400px;
				width: 400px;
			}

			.notes {
				color: #fff;
				left: 15%;
			}

		}

	}

	.banner-video {
		position: absolute;
		z-index: -1;
		opacity: 0;
		left: 40%;
		background: #242944;
		transform: translate(-50%, 0%);

		&.on {
			opacity: 1;
			left: 50%;
		}
	}

	.page-go {
		position: absolute;
		text-align: center;
		bottom: 100px;
		left: 50%;
		z-index: 999;
		margin-left: -150px;
		width: 300px;
		border-radius: 100px;
		height: 100px;
		line-height: 100px;
		font-size: 40px;
		color: #333;
	}

	.info-block {
		margin: 30px;
		border-radius: 10px;
		text-align: center;
		position: relative;
		z-index: 9;
		background: #FFF;
		padding: 1px;

		.info {
			padding: 5px 30px;
			color: #aaa;
			line-height: 40px;
			text-align: left;
			font-size: 30px;
			font-weight: 300;
		}

		.info-foot {
			.line {
				height: 80px;
				width: 49%;
				border-right: 5px dotted #999;
			}

			color: #666;
			line-height: 50px;
			font-size: 35px;
		}

		.c-f-img {
			display: flex;
			justify-content: center;

			.imgs {
				width: 200px;
				height: 200px;
				margin: 20px;
			}
		}
	}

	.title {
		color: #458ae2;
		font-size: 40px;
		line-height: 80px;
		margin-top: 50px;
		text-align: center;
	}

	.card {
		text-align: center;
		position: relative;
		width: 100%;
		height: 600px;
		z-index: 99;
		margin-top: 50px;

		.card-box {
			position: absolute;
			left: 20%;
			top: 0px;
			text-align: center;
			padding: 50px 0;
			box-sizing: border-box;
			width: 50%;
			height: 100%;
			border: 1px solid #bbb;
			border-radius: 20px;
			background: #fff;
			box-shadow: 0 0 10px 1px #eee;

			.card-img {
				height: 150px;
				display: inline-block;
			}

			.h {
				font-size: 40px;
				color: #000;
			}

			.p {
				display: block;
				line-height: 45px;
				text-align: left;
				color: #999;
				padding: 0px 20px;
				padding-top: 20px;
				font-size: 28px;
			}
		}

		&.card-1 {
			.c-t-1 {
				z-index: 1;
				left: 25%;
			}

			.c-t-2 {
				z-index: -1;
				left: 50%;
				-webkit-transform: scale(.8);
				-moz-transform: scale(.8);
				-o-transform: scale(.8);
				transform: scale(.8);
			}

			.c-t-3 {
				z-index: -1;
				left: 0%;
				-webkit-transform: scale(.8);
				-moz-transform: scale(.8);
				-o-transform: scale(.8);
				transform: scale(.8);
			}
		}

		&.card-2 {
			.c-t-1 {
				z-index: -1;
				left: 0%;
				-webkit-transform: scale(.8);
				-moz-transform: scale(.8);
				-o-transform: scale(.8);
				transform: scale(.8);
			}

			.c-t-2 {
				z-index: 1;
				left: 25%;
			}

			.c-t-3 {
				z-index: -1;
				left: 50%;
				-webkit-transform: scale(.8);
				-moz-transform: scale(.8);
				-o-transform: scale(.8);
				transform: scale(.8);
			}
		}

		&.card-3 {
			.c-t-1 {
				z-index: -1;
				left: 50%;
				-webkit-transform: scale(.8);
				-moz-transform: scale(.8);
				-o-transform: scale(.8);
				transform: scale(.8);
			}

			.c-t-2 {
				z-index: -1;
				left: 0%;
				-webkit-transform: scale(.8);
				-moz-transform: scale(.8);
				-o-transform: scale(.8);
				transform: scale(.8);
			}

			.c-t-3 {
				z-index: 1;
				left: 25%;
			}
		}
	}

	.bottom-btn {
		text-align: center;
		padding-top: 80px;

		.btn {
			display: inline-block;
			width: 300px;
			height: 80px;
			line-height: 80px;
			background: #FFF;
			margin: 0px 20px;
			font-size: 30px;
			border-radius: 70px;
			color: #256dff
		}

		.btn2 {
			display: inline-block;
			width: 300px;
			height: 80px;
			line-height: 80px;
			color: #FFF;
			border-radius: 70px;
		}
	}

	.g-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 30px;
		box-sizing: border-box;

		.box {
			flex: 1;
			width: 80%;
			margin: 30px auto;
			background: #fff;
			border-radius: 10px;
			border: 1px solid #bbb;
			padding: 30px;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.in {
				width: 100%;
				text-align: center;

				.log {
					height: 100px;
				}

				.p {
					color: #333333;
					display: block;
					margin: 0px;
					font-size: 28px;
				}
			}

		}
	}

	.logo-box {
		overflow: hidden;
		padding: 20px;

		.box {
			width: 25%;
			float: left;
			padding: 30px 20px;
			box-sizing: border-box;
			color: #fff;
			text-align: center;

			.icon {
				width: 100%;
			}

			.name {
				color: #FFF;
			}

		}

	}

	.footer {
		flex: 1;
		position: relative;
		height: 100%;
		z-index: 9;
		overflow: hidden;
		text-align: center;

		.f-bg {
			width: 100%;
			position: absolute;
			left: 0px;
			top: 0px;
			z-index: -1;
		}

		.f-box {
			background: rgba(37, 109, 255, 0.80);
			padding: 50px 30px;
			margin: 50px 80px;
			color: #FFF;
			margin-top: 150px;
			color: #eee;

			.h3 {
				font-size: 50px;
				font-weight: 300;
				margin: 0px;
			}

			.p {
				margin-top: 30px;
				line-height: 50px;
				text-align: left;
			}
		}

		.hui {
			color: #999;
			margin: 20px 0px;
		}

		.line {
			display: block;
			width: 49%;
			// background: #f00;
			height: 120px;
			margin: 30px 0px;
			border-right: 4px dotted #bbb;
		}


		.btn {
			background: #256dff;
			color: #FFF;
			height: 80px;
			line-height: 80px;
			font-size: 35px;
			display: inline-block;
			padding: 0px 50px;
			border-radius: 70px;
		}

		.weib {
			position: absolute;
			bottom: 0px;
			left: 0px;
			width: 100%;
			background: #256dff;
			color: #FFF;
			line-height: 80px;
		}
	}
</style>
